<template>
  <div class="content">
    <van-nav-bar title="商家申请" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit" style="margin-top: 1rem;" v-if="!hasSubmit">
      <van-cell-group inset>
        <div style="display:flex;margin-top: 1rem;">
          <van-image width="5rem" height="5rem" fit="cover" style="position:relative;left:2rem;" :src="form.spicture" />
          <label for="file" style="position:relative;left:10rem;top:2rem;display: flex; background-color: rgb(79, 152, 122);color:#fff;
              align-items: center; height: 2rem;border-radius: 0.5rem;">
            上传店铺图片
          </label>
          <input type="file" id="file" class="sr-only" accept="image/png,image/jpeg,image/jpg"
            @change="uploadImage($event.target.files)" style="display: none;" />
        </div>
        <van-field v-model="form.sname" name="sname" label="店铺名称" placeholder="请填写店铺名称"
          :rules="[{ required: true, message: '请填写店铺名称' }]" />
        <van-field v-model="form.screatetime" name="screatetime" label="注册时间" placeholder="请填写注册时间"
          :rules="[{ required: true, message: '请填写注册时间' }]" disabled />
        <van-field v-model="form.sintroduction" name="sintroduction" label="店铺简介" placeholder="请填写店铺简介"
          :rules="[{ required: true, message: '请填写店铺简介' }]" />
        <van-field v-model="form.sowner" name="sowner" label="店主姓名" placeholder="请填写店主姓名"
          :rules="[{ required: true, message: '请填写店主姓名' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          申请
        </van-button>
      </div>
    </van-form>
    <div v-else class="success">
      <van-icon name="wechat-pay" size="50" />
      <div>恭喜您申请成功</div>
      <div class="code">您的店铺代码是</div>
      <div class="sixcode">{{ form.ssixcode }}</div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { uploadFile } from "@/utils/upload";
import { dateFormat } from '@/utils/time'
import { useStore } from 'vuex'
import {ImgUrl} from '@/constant.ts'
const request = require('@/network/request').default;
export default {
  name: 'Registershop',
  props: [],
  setup(props, context) {
    const onClickLeft = () => history.back();
    const form = ref({
      sname: '',
      screatetime: dateFormat("YYYY-mm-dd", new Date()),
      spicture: '',
      sintroduction: '',
      suid: 0,
      sstatus: 1,
      ssixcode: '',
      sowner: ''
    })
    const onSubmit = (values) => {
      form.value.suid = JSON.parse(localStorage.getItem('userInfo')).uid
      console.log('submit', form.value);
      form.value.ssixcode = String((new Date()).getTime()).substr(7, 6)
      setTimeout(() => {
        hasSubmit.value = true
      }, 1000);
      request.post('/applyshop', form.value).then(res => {
        console.log(res)
      })
    };
    const hasSubmit = ref(false)
    const store = useStore()
    onMounted(() => {
      // console.log(store.getters['getSixCode'])
      // if(store.getters['getSixCode']){
      //   hasSubmit.value=true
      //   form.ssixcode=store.getters['getSixCode']
      // }
      let shop = {
        suid: JSON.parse(localStorage.getItem('userInfo')).uid
      }
      request.post('/getcodebyuid', shop).then(res => {
        if (res.code == -1) {
          // console.log(res)
        } else if (res.code == 0) {
          hasSubmit.value = true
          // console.log(res)
          form.value.ssixcode = res.data
          // store.commit('setSixCode', res.data)
          // console.log(store.getters['getSixCode'])
        }
      })
    })
    function uploadImage(files) {
      // console.log(files)
      if (files.length > 0) {
        uploadFile(files[0]).subscribe({
          next: (result) => {
            console.log(result)
          },
          error: (err) => {
            console.log(err)
          },
          complete: (e) => {
            let link = ImgUrl + e.key
            console.log(link)
            form.value.spicture = link
          },
        });
      }
    }
    return {
      onClickLeft,
      onSubmit,
      form,
      uploadImage,
      hasSubmit
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  height: 100vh;
  background-color: rgb(240, 236, 236);

  .success {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    top: 5rem;

    .code {
      margin-top: 2rem;
    }

    .sixcode {
      font-size: 30px;
      font-weight: bold;
      color: green;
      margin-top: 1rem;
    }
  }
}
</style>